<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{height: 2000px;}
			#box2{
				width: 100%;height: 50px;background: orange;
				position: fixed;top: 0;display: none;
			}
		</style>
		<script type="text/javascript" src="js/jquery-1.12.3.js"></script>
		<script type="text/javascript">
			$(function(){
				
				var box3Top = $("#box3").offset().top;
				
				$(window).scroll(function(){
					var scrollTop = $(window).scrollTop();
					
					if(scrollTop >= box3Top){
						$("#box2").fadeIn();
					}
					else{
						$("#box2").fadeOut();
					}
					
					
					
				})
				
				
				
				
			})
		</script>
	</head>
	<body>
		<div id="box1">
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
		</div>
		<div id="box2">box2</div>
		<div id="box3">box3
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
			<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p>
		</div>
		
	</body>
</html>
